<template>
	<view class="container">
		<!-- 顶部导航 -->
		<!-- <view class="nav-header">
			<view class="back-btn">
				<text class="icon-back">&lt;</text>
			</view>
			<view class="title">购物返现</view>
			<view class="right-btns">
				<text class="more-dots">···</text>
				<text class="circle">○</text>
			</view>
		</view> -->

		<!-- 返现说明 -->
		<view class="cashback-banner">
			<view class="banner-content">
				<text class="banner-title">最高省70%</text>
				<text class="banner-subtitle">购物先领券·下单拿奉献值</text>
			</view>
		</view>

		<!-- 步骤说明 -->
		<view class="steps-container">
			<view class="step">
				<view class="step-circle">
					<text class="step-num">1</text>
				</view>
				<text class="step-text">复制商品名称</text>
			</view>
			<view class="step">
				<view class="step-circle">
					<text class="step-num">2</text>
				</view>
				<text class="step-text">到付加加查券</text>
			</view>
			<view class="step">
				<view class="step-circle">
					<text class="step-num">3</text>
				</view>
				<text class="step-text">领券下单拿奉献值</text>
			</view>
		</view>

		<view class="sc">
			<view class="all_a">
			<view class="search-input">
				<textarea style="height: 100rpx;width: 100%;" name="" class="texts" v-model="keywords" placeholder="搜索关键词 领券拿收益" cols="10" rows="10"></textarea>
			</view>
			
			
			<view class="platform-row">
				<view class="platform-icons">
					<image class="platform-icon" src="/static/new/taobao.jpg" style="z-index: 1;position: relative;"></image>
					<image class="platform-icon" src="/static/new/jd.jpg" style="margin-left: -15rpx; z-index: 2;position: relative;"></image>
					<image class="platform-icon" src="/static/new/vip.jpg" style="margin-left: -15rpx; z-index: 3;position: relative;"></image>
					<image class="platform-icon" src="/static/new/pdd.jpg" style="margin-left: -15rpx; z-index: 4;position: relative;"></image>
				</view>
				<view class="help-link" @click="onTip('如何查券拿奉献值')">
					<text class="help-icon">?</text>
					<text>如何查券拿奉献值?</text>
				</view>
			</view>	
			</view>
			
			<!-- 查券按钮 -->
			<button @click="to" class="search-button">立即查券</button>
			
			<!-- 电商平台入口 -->
			<view class="ecommerce-platforms">
				<view 
					class="platform-item" 
					v-for="(platform, index) in platforms" 
					:key="index"
					:class="{'active': type === platform.id}"
					@tap="switchPlatform(platform.id)"
				>
					<image :src="platform.icon" class="platform-logo"></image>
					<text class="platform-name">{{platform.name}}</text>
				</view>
			</view>
			
			<!-- 商品分类 -->
			<scroll-view class="category-scroll" scroll-x="true" show-scrollbar="false">
				<view class="category-list">
					<view 
						v-for="(category, index) in categoryList" 
						:key="category.cid"
						:class="['category-item', currentCategory === category.cid ? 'active' : '']"
						@tap="handleCategoryChange(category.cid)"
					>
						{{category.name}}
					</view>
				</view>
			</scroll-view>
			
			<!-- 商品列表 -->
			<view class="products" v-if="!loading">
		<!-- 		<view v-if="type == 1">
					<view class="product-card" v-for="(product, index) in products" :key="index" @tap="gotoLink('/pages/home/goodsdetial?goodsId='+product.goodsId+'&type=1')">
						<image :src="product.mainPic" mode="aspectFill" class="product-image"></image>
						<view class="product-content">
							<view class="product-source">
								<text class="product-title">{{product.title}}</text>
							</view>
							<view class="coupon-row">
								<text class="coupon">券：¥{{product.couponPrice}}</text>
								<text class="cashback">返现：¥{{product.money}}</text>
							</view>
							<view class="price-row">
								<text class="current-price">¥{{product.actualPrice}}</text>
								<text class="original-price">¥{{product.originalPrice}}</text>
								<text class="total-save">省¥{{product.originalPrice}}</text>
							</view>
						</view>
					</view>
				</view> -->
	<!-- 			<view v-if="type == 2">
					<view class="product-card" v-for="(product, index) in products" :key="index" 
						@tap="gotoLink(
						'/pages/home/goodsdetial?goodsId='+product.itemId+
						'&type=2&price='+product.price+
						'&coupon='+product.coupon+
						'&money='+product.money+
						'&salf_num='+product.salf_num+
						'&market_price='+product.market_price+
						'&buy_money='+product.buy_money+
						'&salf_price='+product.salf_price)">
						<image :src="product.imageUrl" mode="aspectFill" class="product-image"></image>
						<view class="product-content">
							<view class="product-source">
								<text class="product-title">{{product.skuName}}</text>
							</view>
							<view class="coupon-row">
								<text class="coupon">券：¥{{product.coupon}}</text>
								<text class="cashback">返现：¥{{product.money}}</text>
							</view>
							<view class="price-row">
								<text class="current-price">¥{{product.salf_price}}</text>
								<text class="original-price">¥{{product.market_price}}</text>
								<text class="total-save">省¥{{(product.buy_money)}}</text>
							</view>
						</view>
					</view>
				</view> -->
				
				<view>
					<view class="product-card" v-for="(product, index) in products" :key="index" 
						@tap="gotoLink(
						'/pages/home/goodsdetial?goodsId='+product.itemId+
						'&type='+type+'&price='+product.price+
						'&coupon='+product.coupon+
						'&money='+product.money+
						'&salf_num='+product.salf_num+
						'&market_price='+product.market_price+
						'&buy_money='+product.buy_money+
						'&salf_price='+product.salf_price)">
						<image :src="product.imageUrl" mode="aspectFill" class="product-image"></image>
						<view class="product-content">
							<view class="product-source">
								<!-- <image class="source-icon" :src="product.sourceIcon"></image> -->
								<text class="product-title">{{product.skuName}}</text>
							</view>
							<view class="coupon-row">
								<text class="cashback">赠送奉献值</text>
							</view>
							<view class="price-row">
								<text class="current-price">¥{{product.salf_price}}</text>
								<text class="original-price">¥{{product.market_price}}</text>
								<text class="total-save">省¥{{(product.buy_money)}}</text>
							</view>
						</view>
					</view>
				</view>
		<!-- 		<view v-if="type == 4">
					<view class="product-card" v-for="(product, index) in products" :key="index" @tap="gotoLink('/pages/home/goodsdetial?goodsId='+product.goodsId+'&type=4')">
						<image :src="product.goodsThumbUrl" mode="aspectFill" class="product-image"></image>
						<view class="product-content">
							<view class="product-source">
								<text class="product-title">{{product.goodsName}}</text>
							</view>
							<view class="coupon-row">
								<text class="cashback">返现：¥{{product.money}}</text>
							</view>
							<view class="price-row">
								<text class="current-price">¥{{product.vipPrice}}</text>
								<text class="original-price">¥{{product.marketPrice}}</text>
								<text class="total-save">省¥{{(product.marketPrice - product.vipPrice).toFixed(2)}}</text>
							</view>
						</view>
					</view>
				</view> -->
				<uni-load-more :status="status" color="#000" class="loading-more"></uni-load-more>
			</view>
		</view>
		
		<!-- <uni-load-more :status="status" color="#000" class="loading-more"></uni-load-more> -->
	</view>
</template>

<script>
	import api from "@/api/";
	import shop from "@/api/shop";
	export default {
		data() {
			return {
				loading: true,
				currentCategory: 0,//选择的分类id
				platforms: [
					// { name: '淘宝', icon: '/static/new/taobao.jpg', id: 1 },
					// { name: '拼多多', icon: '/static/new/pdd.jpg', id: 2 },
					// { name: '京东', icon: '/static/new/jd.jpg', id: 3 },
					// { name: '抖音', icon: '/static/new/douyin.jpg', id: 4 },
					// { name: '唯品会', icon: '/static/new/vip.jpg', id: 5 }
				],
				categoryList: [{name:'全部',cid:0}],
				products: [],
				type:2,
				page: 1,
				total: 0,
				listId:0,
				limit: 10,
				status: 'more',
				keywords:''
			}
		},
		// computed: {
		// 	filteredProducts() {
		// 		return this.products.filter(product => {
		// 			if (this.currentCategory === 0) {
		// 				// 综合分类下只按平台筛选
		// 				return product.platform === this.currentPlatform;
		// 			} else {
		// 				// 其他分类同时满足平台和分类条件
		// 				return product.platform === this.currentPlatform && product.category === this.currentCategory;
		// 			}
		// 		});
		// 	}
		// },
		onLoad() {
			const timer = setTimeout(() => {
				clearTimeout(timer)
				this.loading = false
				this.type = 2;
				this.currentCategory = 0;
				this.getGoods()
				this.getCate(this.type)
			}, 0)
		},
		onReachBottom() {
			if(this.products.length === this.total) {
				return
			}
			this.page = this.page + 1
			this.switchPlatform(this.type)
		},
		methods: {
			// 切换商品分类
			handleCategoryChange(categoryId) {
				console.log(categoryId)
				if (this.currentCategory === categoryId) return;
				this.currentCategory = categoryId;
				this.getGoods();
			},
			onTip(txt) {
				uni.hideToast()
				uni.showToast({
					icon: 'none',
					title: txt
				})
			},
			getCate(type){
				var that = this;
				shop.getCate({
					type:type
				}).then(res => {
					if (res.code == 1) {
						that.categoryList = [...that.categoryList, ...res.data];
					}
				})
			},
			to(){
				if(!this.keywords || this.keywords == ''){
					uni.showToast({
						title:"请输入查询关键词",
						icon:"none"
					})
					return;
				}
				this.getGoods();
			},
			gotoLink(url){
				uni.navigateTo({
					url:url
				})
			},
			switchPlatform(index) {
				var that = this;
				that.type = index;
				this.getCate(that.type);
				if(that.page == 1){
					that.products = [];
					that.total=0;
				}
				that.status = 'loading'
				this.getGoods()
			},
			getGoods(){
				var that = this;
				// 获取 每日爆品
				if(that.page == 1){
					that.products = [];
					that.total=0;
				}
				that.status = 'loading'
				shop.goods({
					type:this.type,
					cate_id:this.currentCategory,
					limit:this.limit,
					page:this.page,
					listId:this.listId,
					keywords:this.keywords
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						that.products = that.page == 1 ?res.data.list :[...that.products, ...res.data.list]
						that.total = res.data.total
						that.listId = res.data.listId
						if(that.products.length < that.total) {
							that.status = 'more'
						} else {
							that.status = 'noMore'
						}
					}
				})
			},
		}
	}
</script>


<style>
	.sc{
		position: relative;
		top: -80rpx;
		z-index: 99;
	}
.all_a{
	background: #fff;
	margin: 24rpx;
	background-color: #fff;
	border-radius: 16rpx;
	
	padding: 14rpx;
}
	.container {
		background-color: #f7f7f7;
		min-height: 100vh;
		position: relative;
	}

	.nav-header {
		background-color: #ff6b4b;
		padding: 16rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
	}

	.back-btn {
		width: 60rpx;
		font-size: 40rpx;
	}

	.title {
		font-size: 34rpx;
		font-weight: 500;
	}

	.right-btns {
		display: flex;
		gap: 24rpx;
		font-size: 40rpx;
	}

	.cashback-banner {
		background-color: #ff6b4b;
		padding-bottom: 160rpx;
		border-radius: 0 0 40rpx 40rpx;
		position: relative;
		z-index: 1;
	}

	.banner-content {
		padding: 60rpx 0 20rpx;
		text-align: center;
		color: #fff;
	}

	.banner-title {
		font-size: 72rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 20rpx;
		letter-spacing: 2rpx;
	}

	.banner-subtitle {
		font-size: 32rpx;
		letter-spacing: 1rpx;
	}

	.steps-container {
		margin: -114rpx 24rpx 0;
		background-color: #ffefdd;
		border-radius: 16rpx;
		padding: 32rpx 24rpx 74rpx 24rpx;
		display: flex;
		justify-content: space-around;
		position: relative;
		z-index: 2;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	}

	.step {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.step-circle {
		width: 36rpx;
		height: 36rpx;
		background-color: #ff6b4b;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.step-num {
		color: #fff;
		font-size: 24rpx;
		line-height: 1;
	}

	.step-text {
		font-size: 26rpx;
		color: #333;
	}

	.search-input {
		padding-bottom: 25rpx;
		/* margin: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx; */
	}

	.search-placeholder {
		color: #999;
		font-size: 26rpx;
	}

	.platform-row {
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.platform-icons {
		display: flex;
		align-items: center;
	}

	.platform-icon {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		border: 2rpx solid #fff;
	}

	.help-link {
		display: flex;
		align-items: center;
		gap: 8rpx;
		color: #666;
		font-size: 24rpx;
	}

	.help-icon {
		width: 28rpx;
		height: 28rpx;
		border: 2rpx solid #666;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
	}

	.search-button {
		margin: 32rpx 24rpx;
		background-color: #ff6b4b;
		color: #fff;
		border-radius: 44rpx;
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
	}

	.shop-banner {
		margin: 24rpx;
		background: linear-gradient(to right, #4cd964, #3ac756);
		border-radius: 16rpx;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
	}

	.shop-left {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.check-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
		display: flex;
		align-items: center;
	}

	.shop-text {
		font-size: 28rpx;
	}

	.shop-subtext {
		font-size: 24rpx;
		margin-left: 20rpx;
		opacity: 0.9;
	}

	.detail-link {
		background-color: rgba(255,255,255,0.2);
		padding: 8rpx 24rpx;
		border-radius: 32rpx;
		font-size: 24rpx;
	}

	.ecommerce-platforms {
		background-color: #fff;
		padding: 20rpx 0;
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.platform-item {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		margin-bottom: 16rpx;
	}

	.platform-logo {
		width: 72rpx;
		height: 72rpx;
		margin-bottom: 8rpx;
	}

	.platform-name {
		font-size: 24rpx;
		color: #333;
		position: relative;
		padding-bottom: 8rpx;
	}

	.platform-item.active .platform-name {
		color: #ff6b4b;
	}

	.platform-item.active .platform-name::after {
		content: '';
		position: absolute;
		bottom: -4rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #ff6b4b;
	}

	.category-scroll {
		background-color: #fff;
		white-space: nowrap;
		padding: 16rpx 0;
	}

	.category-list {
		display: flex;
		padding: 0 16rpx;
	}

	.category-item {
		padding: 12rpx 32rpx;
		font-size: 28rpx;
		color: #333;
		background-color: #fff;
		margin: 0 8rpx;
		border-radius: 26rpx;
		transition: all 0.3s;
	}

	.category-item.active {
		color: #fff;
		background-color: #ff6b4b;
	}

	.products {
		padding: 20rpx;
		background: #f7f7f7;
	}

	.product-card {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		display: flex;
		gap: 20rpx;
	}

	.product-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
	}

	.product-content {
		flex: 1;
		margin-left: 20rpx;
	}

	.product-source {
		display: flex;
		align-items: center;
		height: 80rpx;
		gap: 8rpx;
		margin-bottom: 12rpx;
	}

	.source-icon {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
	}

	.product-title {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.price-row {
		display: flex;
		justify-content: space-between;
		margin: 16rpx 0;
	}

	.current-price {
		color: #ff6b4b;
		font-size: 36rpx;
		font-weight: bold;
		margin-right: 12rpx;
	}

	.original-price {
		color: #999;
		padding-right: 55rpx;
		font-size: 28rpx;
		padding-top: 10rpx;
		text-decoration: line-through;
	}

	.coupon-row {
		display: flex;
		gap: 16rpx;
		
		margin-bottom: 12rpx;
	}
.coupon{
		background-color:#ff533d;
		color: #fff;
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
	}
	 .cashback {
		background-color: #371c00;
		color: #ddc87e;
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
	}

	.total-save {
		background-color: #fdf0ea;
		color: #ff6b4b;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		border-radius: 10rpx;
		padding: 1rpx 10rpx;
	}
	
	.texts{
		font-size: 26rpx;
	}
</style>
